<template>
  <div class="video_add_container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="baseInfo">
        <el-form
          label-position="left"
          label-width="80px"
          :model="videoForm"
          :rules="rules"
          ref="videoForm"
        >
          <el-row :gutter="80">
            <el-col :span="8">
              <el-form-item prop="name" label="名称：">
                <el-input v-model="videoForm.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="author" label="作者：">
                <el-input v-model="videoForm.author" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="category" label="类别：">
                <el-cascader
                  placeholder="请选择类别"
                  :options="categoryOptions"
                  :props="{label: 'name', value: 'id'}"
                  v-model="videoForm.category"
                  @change="categoryChange"
                  filterable
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="coverImg" label="封面：">
                <AvatarImg :imageUrl="videoForm.coverImg" @success="handleAvatarSuccess" />
              </el-form-item>
            </el-col>
            <el-col v-if="videoForm.category && videoForm.category.length>0" :span="18">
              <el-form-item prop="label" label="标签：">
                <div v-for="item in labels" :key="item.id" style="margin: 20px 0">
                  <div v-if="item.children && item.children.length>0">
                    <div style="float:left;margin-right: 20px;">{{item.name+':'}}</div>
                    <el-checkbox-group v-model="videoForm.labels" size="small">
                      <el-checkbox-button
                        v-for="label in item.children"
                        :label="label"
                        :key="label.id"
                      >{{label.name}}</el-checkbox-button>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="synopsis" label="简介">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="videoForm.synopsis"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="资源管理" name="resourceUplaod">
        <el-button type="primary" @click="handleClick(null,0,'新增管理员')">新增</el-button>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
          <el-form
            label-position="left"
            label-width="100px"
            :model="adminForm"
            :rules="rules"
            ref="adminForm"
          >
            <el-form-item label="名称" prop="name">
              <el-input
                :disabled="formType === 1"
                v-model="adminForm.name"
                placeholder="请输入内容"
                clearable
              />
            </el-form-item>
            <el-form-item label="账号" prop="username">
              <el-input
                :disabled="formType === 1"
                v-model="adminForm.username"
                placeholder="请输入内容"
                clearable
              />
            </el-form-item>
            <el-form-item label="资源" prop="password">
              <FileFragmentUpload @success="videoUplaodSuccess"/>
            </el-form-item>
            <el-form-item prop="status" label="启用">
              <el-switch
                :disabled="formType === 1"
                v-model="adminForm.status"
                active-value="0"
                inactive-value="1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
              v-if="formType !== 1"
              :loading="loading"
              type="primary"
              @click="confirmHandel('adminForm')"
            >确 定</el-button>
          </span>
        </el-dialog>
        <el-table
          :data="pagination.resourceDatas"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
        >
          <el-table-column type="index" width="30px"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="url" label="路径"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100px">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row,1,'管理员详情')" type="text" size="small">查看</el-button>
              <el-button @click="handleClick(scope.row,2,'编辑管理员')" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizeChoose"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import FileFragmentUpload from "@/components/FileFragmentUpload";
import AvatarImg from "@/components/ImgUpload/AvatarImg";
import { getCategoryList } from "@/api/video/category";
import { getLabelList } from "@/api/video/label";
import {
  getPaginationList,
  // add,
  // getDetails,
  // update,
} from "@/api/video/resource";

export default {
  components: { FileFragmentUpload, AvatarImg },
  data() {
    return {
      activeName: "second",
      categoryOptions: [],
      label: null,
      labels: [],
      videoForm: {
        name: "",
        author: "",
        labels: [],
        synopsis: "",
        category: [],
        coverImg: null,
        categoryParentId: null,
        categoryId: null,
        status: "0",
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizeChoose: [5, 10, 15, 20],
        total: 0,
        resourceDatas: [],
      },
      videoResourceForm: {},
      rules: {
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        synopsis: [{ required: true, message: "请填写简介", trigger: "blur" }],
        category: [
          { required: true, message: "请选择类别", trigger: "change" },
        ],
        coverImg: [
          { required: true, message: "请上传封面图片", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    getCategoryList().then((v) => {
      this.categoryOptions = v.data;
    });
  },
  methods: {
    getPaginationSysUser() {
      const params = {
        pageSize: this.pagination.pageSize,
        pageIndex: this.pagination.currentPage,
      };
      getPaginationList(params).then((res) => {
        this.pagination.adminDatas = res.data.records;
        this.pagination.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    handleAvatarSuccess(url) {
      this.videoForm.coverImg = url;
    },
    categoryChange(value) {
      this.videoForm.categoryParentId = value[0];
      this.videoForm.categoryId = value[1];
      getLabelList({ categoryId: value[1] }).then((v) => {
        this.labels = v.data;
      });
    },
    callBackHeadImgs(fileList) {
      this.fileList = fileList;
    },
    saveBaseInfo() {
      this.videoForm.status = "1";
    },
    confirmHandel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.videoForm.status || this.videoForm.status === "0") {
            this.saveBaseInfo();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.video_add_container {
  .foot {
    position: relative;
    width: 90%;
    margin-top: 50px;
  }
}
</style>